<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="home"></route>
<template>
  <view class="bg-white overflow-hidden" :style="{ marginTop: safeAreaInsets?.top + 'px' }">
    <view>
      <wd-search placeholder="搜索食谱" cancel-txt="搜索" @search="handleSearch" />
    </view>
    <view class="wraper">
      <wd-sidebar v-model="active" @change="handleChange">
        <wd-sidebar-item
          v-for="(item, index) in categories"
          :key="item.categoryId"
          :value="index"
          :label="item.categoryName"
          :disabled="false"
        />
      </wd-sidebar>
      <view class="content" :style="`transform: translateY(-${active * 100}%)`">
        <scroll-view
          v-for="(item, index) in categories"
          :key="item.categoryId"
          class="category"
          scroll-y
          scroll-with-animation
          :show-scrollbar="false"
          :scroll-top="scrollTop"
          :throttle="false"
        >
          <wd-cell-group :title="item.categoryName" border>
            <wd-cell
              vertical
              v-for="cell in dishesList[index]"
              :key="cell.dishId"
              :title="cell.name"
              :label="cell.difficulty + ' | ' + cell.cookTime + ' | ' + cell.tastes.join('/')"
            >
              <image
                :src="cell.mainImage"
                mode="scaleToFill"
                style="width: 100%; height: 80px; border-radius: 8px"
              />
            </wd-cell>
          </wd-cell-group>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { onMounted, ref, nextTick } from 'vue'
import { getCategoriesAPI, getDishesAPI, CategoryItem, DishItem } from '@/service/index/recipe'

// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()

const active = ref<number>(0)
const scrollTop = ref<number>(0)
const categories = ref<CategoryItem[]>([])
const dishesList = ref<DishItem[][]>([])
const searchName = ref<string>('')
const pageSize = 20 // 暂时写死20

// 获取所有分类
const fetchCategories = async () => {
  const res = await getCategoriesAPI()
  if (res.code === 1) {
    categories.value = res.data
    // 初始化每个分类的菜品列表
    dishesList.value = res.data.map(() => [])
    // 默认加载第一个分类菜品
    if (res.data.length > 0) fetchDishesByCategory(0)
  }
}

// 获取指定分类下的菜品
const fetchDishesByCategory = async (catIdx: number) => {
  const categoryId = categories.value[catIdx]?.categoryId
  if (!categoryId) return
  const res = await getDishesAPI({
    name: searchName.value,
    categoryIds: [categoryId],
    page: 1,
    pageSize,
  })
  if (res.code === 1) {
    dishesList.value[catIdx] = res.data.rows
  }
}

function handleChange({ value }) {
  active.value = value
  scrollTop.value = -1
  nextTick(() => {
    scrollTop.value = 0
  })
  fetchDishesByCategory(value)
}

function handleSearch(val: string) {
  searchName.value = val
  fetchDishesByCategory(active.value)
}

onMounted(() => {
  fetchCategories()
})
</script>

<style>
.wraper {
  display: flex;
  height: calc(100vh - var(--window-top));
  height: calc(100vh - var(--window-top) - constant(safe-area-inset-bottom));
  height: calc(100vh - var(--window-top) - env(safe-area-inset-bottom));
  overflow: hidden;
}
.content {
  flex: 1;
  background: #fff;
  transition: transform 0.3s ease;
}
.category {
  box-sizing: border-box;
  height: 100%;
}
</style>
